<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Aviato E-Commerce Template">

    <meta name="author" content="">

    <title>Aviato | E-commerce template</title>

    <!-- Mobile Specific Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../images/favicon.png"/>

    <!-- Themefisher Icon font -->
    <link rel="stylesheet" href="../../plugins/themefisher-font/style.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick-theme.css"/>

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../../css/style.css">

</head>

<body id="body">
<!-- Start Top Header Bar -->
<jsp:include page="common/top-header.jsp"/>
<!-- End Top Header Bar -->


<!-- Main Menu Section -->
<jsp:include page="common/main-menu.jsp"/>

<section class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content">
                    <h1 class="page-name">Favorite</h1>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="single-product">
    <div class="container">
        <div class="row mt-20">
            <div class="col-md-5">
                <div class="single-product-slider">
                    <div id='carousel-custom' class='carousel slide' data-ride='carousel'>
                        <div class='carousel-outer'>
                            <!-- me art lab slider -->
                            <div class='carousel-inner '>
                                <c:forEach items="${products}" var="product">
                                    <c:if test="${products.indexOf(product)==0}">
                                        <div class="item active">
                                    </c:if>
                                    <c:if test="${products.indexOf(product)!=0}">
                                        <div class="item">
                                    </c:if>
                                        <img src='${product.img}' alt=''
                                             data-zoom-image="images/shop/single-products/product-1.jpg"/>
                                    </div>
                                </c:forEach>

                            </div>

                            <!-- sag sol -->
                            <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
                                <i class="tf-ion-ios-arrow-left"></i>
                            </a>
                            <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
                                <i class="tf-ion-ios-arrow-right"></i>
                            </a>
                        </div>

                        <!-- thumb -->
                        <ol class='carousel-indicators mCustomScrollbar meartlab'>
                            <c:forEach items="${products}" var="product" >
                                <li data-target='#carousel-custom' data-slide-to='${products.indexOf(product)}' class='active'>
                                    <img src='${product.img}' alt='' onclick="findFavoriteId(${product.id})"/>
                                </li>
                            </c:forEach>

                        </ol>
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="single-product-details">
                    <h2 id="f_name">${products.get(0).name}</h2>
                    <p class="product-price" id="f_price">$${products.get(0).price}</p>

                    <p class="product-description mt-20" id="f_memo">${products.get(0).memo}</p>
                    <%--<p>${product.memo}</p>--%>
                    <div class="color-swatches">
                        <span>color:</span>
                        <p id="f_color">${products.get(0).color}</p>
                    </div>
                    <div class="product-size">
                        <span>Size:</span>
                        <select class="form-control">
                            <option>S</option>
                            <option>M</option>
                            <option>L</option>
                            <option>XL</option>
                        </select>
                    </div>
                    <div class="product-category">
                        <span>Categories:</span>
                        <ul>
                            <li><a href="#">Products</a></li>
                            <li><a href="#">Soap</a></li>
                        </ul>
                    </div>
                    <div>
                        <a id="f_delete" href="/favorite/delete.do?p_id=${products.get(0).id}" class="btn btn-main mt-20">Don't Like</a>
                        <a id="f_insert" onclick="insertCart(${products.get(0).id})" class="btn btn-main mt-20">Add To Cart</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="tabCommon mt-20">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#details" aria-expanded="true">Details</a></li>
                        <li class=""><a data-toggle="tab" href="#reviews" aria-expanded="false">Reviews (3)</a></li>
                    </ul>
                    <div class="tab-content patternbg">
                        <div id="details" class="tab-pane fade active in">
                            <h4>Product Description</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                                mollit anim id est laborum. Sed ut per spici</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis delectus quidem
                                repudiandae veniam distinctio repellendus magni pariatur molestiae asperiores animi, eos
                                quod iusto hic doloremque iste a, nisi iure at unde molestias enim fugit, nulla
                                voluptatibus. Deserunt voluptate tempora aut illum harum, deleniti laborum animi neque,
                                praesentium explicabo, debitis ipsa?</p>
                        </div>
                        <div id="reviews" class="tab-pane fade">
                            <div class="post-comments">
                                <ul class="media-list comments-list m-bot-50 clearlist">
                                    <!-- Comment Item start-->
                                    <li class="media">

                                        <a class="pull-left" href="#">
                                            <img class="media-object comment-avatar"
                                                 src="../../images/blog/avater-1.jpg" alt="" width="50" height="50"/>
                                        </a>

                                        <div class="media-body">
                                            <div class="comment-info">
                                                <h4 class="comment-author">
                                                    <a href="#">Jonathon Andrew</a>

                                                </h4>
                                                <time datetime="2013-04-06T13:53">July 02, 2015, at 11:34</time>
                                                <a class="comment-button" href="#"><i class="tf-ion-chatbubbles"></i>Reply</a>
                                            </div>

                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at
                                                magna ut ante eleifend eleifend.Lorem ipsum dolor sit amet, consectetur
                                                adipisicing elit. Quod laborum minima, reprehenderit laboriosam officiis
                                                praesentium? Impedit minus provident assumenda quae.
                                            </p>
                                        </div>

                                    </li>
                                    <!-- End Comment Item -->

                                    <!-- Comment Item start-->
                                    <li class="media">

                                        <a class="pull-left" href="#">
                                            <img class="media-object comment-avatar"
                                                 src="../../images/blog/avater-4.jpg" alt="" width="50" height="50"/>
                                        </a>

                                        <div class="media-body">

                                            <div class="comment-info">
                                                <div class="comment-author">
                                                    <a href="#">Jonathon Andrew</a>
                                                </div>
                                                <time datetime="2013-04-06T13:53">July 02, 2015, at 11:34</time>
                                                <a class="comment-button" href="#"><i class="tf-ion-chatbubbles"></i>Reply</a>
                                            </div>

                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at
                                                magna ut ante eleifend eleifend. Lorem ipsum dolor sit amet, consectetur
                                                adipisicing elit. Magni natus, nostrum iste non delectus atque ab a
                                                accusantium optio, dolor!
                                            </p>

                                        </div>

                                    </li>
                                    <!-- End Comment Item -->

                                    <!-- Comment Item start-->
                                    <li class="media">

                                        <a class="pull-left" href="#">
                                            <img class="media-object comment-avatar"
                                                 src="../../images/blog/avater-1.jpg" alt="" width="50" height="50">
                                        </a>

                                        <div class="media-body">

                                            <div class="comment-info">
                                                <div class="comment-author">
                                                    <a href="#">Jonathon Andrew</a>
                                                </div>
                                                <time datetime="2013-04-06T13:53">July 02, 2015, at 11:34</time>
                                                <a class="comment-button" href="#"><i class="tf-ion-chatbubbles"></i>Reply</a>
                                            </div>

                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at
                                                magna ut ante eleifend eleifend.
                                            </p>

                                        </div>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="products related-products section">
    <div class="container">
        <div class="row">
            <div class="title text-center">
                <h2>Related Products</h2>
            </div>
        </div>
        <div class="row">
            <c:forEach items="${products}" var="product" end="3">
                <div class="col-md-3">
                    <div class="product-item">
                        <div class="product-thumb">
                            <span class="bage">Sale</span>
                            <img class="img-responsive" src="${product.img}" alt="product-img"/>
                            <div class="preview-meta">
                                <ul>
                                    <li>
									<span data-toggle="modal" data-target="#product-modal" onclick="findId(${product.id})">
										<i class="tf-ion-ios-search"></i>
									</span>
                                    </li>
                                    <li>
                                        <a onclick="insertFavorite(${user.u_id},${product.id})"><i class="tf-ion-ios-heart" ></i></a>
                                    </li>
                                    <li onclick="insertCart(${product.id})">
                                        <a><i class="tf-ion-android-cart"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="product-content">
                            <h4><a href="favorite.jsp">Reef Boardsport</a></h4>
                            <p class="price">$200</p>
                        </div>
                    </div>
                </div>
            </c:forEach>

        </div>
    </div>
</section>


<!-- Modal -->
<jsp:include page="common/modal.jsp"/>

<!-- Footer -->
<jsp:include page="common/footer.jsp"></jsp:include>

<a class="btn btn--success btn--floating box-shadow-wide" target="_blank" href="#products/aviato-e-commerce-template/">
    <span class="btn__text">
        Purchase Full Template Pack
    </span>
</a>


<!--
Essential Scripts
=====================================-->


<!-- Main jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 3.1 -->
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Instagram Feed Js -->
<script src="../../plugins/instafeed.js/instafeed.min.js"></script>
<!-- Slick Carousel -->
<script src="../../plugins/slick-carousel/slick/slick.min.js"></script>
<!-- Google Map js -->


<!-- Main Js File -->
<script src="../../js/script.js"></script>

<script type="text/javascript">
    function findFavoriteId(id) {
        $.ajax({
            type: "POST",
            url: "/shop/findId.do",
            data: {"id":id},
            success: function(msg){
                $("#f_name").text(msg.name)
                $("#f_memo").text(msg.memo)
                $("#f_color").text(msg.color)
                $("#f_price").text("$"+msg.price)
                $("#f_insert").attr("onclick","insertCart("+msg.id+")")
                $("#f_delete").attr("href","/favorite/delete.do?p_id="+msg.id);
            }
        });
    }
</script>

</body>
</html>